<template>
	<div class="father">
		<h3>父组件</h3>
		<h4>房产：{{ house }}</h4>
		<button @click="changeToy">修改c1的玩具</button>
		<button @click="changeComputer">修改c2的电脑</button>
		<button @click="changeAllChild($refs)">修改全部</button>
		<Child1 ref="c1"/>
		<Child2 ref="c2"/>
	</div>
</template>

<script setup lang="ts" name="Father">
	import Child1 from './Child1.vue'
	import Child2 from './Child2.vue'
	import { ref,reactive } from "vue";
	let c1 = ref()
	let c2 = ref()
	

	// 数据
	let house = ref(4)
	// 方法
	function changeToy(){
		c1.value.toy="芭比娃娃"
	}
	function changeComputer(){
		c2.value.computer="苹果"			
	}
	function changeAllChild(refs:any){
		for (let key in refs) {
			refs[key].toy="芭比娃娃"	
			refs[key].computer="苹果"
			refs[key].book+=5
		}			
	}
	// 向外部提供数据
	defineExpose({house})
</script>

<style scoped>
	.father {
		background-color: rgb(165, 164, 164);
		padding: 20px;
		border-radius: 10px;
	}

	.father button {
		margin-bottom: 10px;
		margin-left: 10px;
	}
</style>

